<div id="navigation">
    <div id="tagOne" class="tgshow on"></div>
    <div id="tagTwo" class="tgshow"></div>
    <div id="tagThr" class="tgshow"></div>
    <div id="tagFou" class="tgshow"></div>
    <div style="position: absolute;">
        <div class="navTags on" data-index="0" style="margin-left: 18px;"></div>
        <div class="navTags" data-index="1"></div>
        <div class="navTags" data-index="2"></div>
        <div class="navTags" data-index="3"></div>
    </div>
</div>
<script>
    var tgshow = $(".tgshow")
    var navTags = $(".navTags")
    navTags.click(function () {
        $(this).addClass("on").siblings().removeClass("on")
        tgshow.removeClass("on")
        tgshow.eq($(this).data("index")).addClass("on")
    })
    var titles = [
        undefined,
        ["四月前奏", "春光盈盈", "碧水流云", "草长莺飞"],
        ["春花烂漫", "花满枝桠", "幸运星空", "花样年华"],
        ["犯二青年", "雏菊之恋", "谷雨节气", "追爱之旅"]
    ]
    for (var i = 0; i < 4; i++) {
        navTags.eq(i).html(titles[$.page][i])
    }

</script>